<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';

import { onMounted } from 'vue';

// import { DictEnum } from '@vben/constants';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { meetingEnrollList } from '#/api/meeting/enroll';
// import { getPopupContainer } from '@vben/utils';
// import { renderDict } from '#/utils/render';

const props = defineProps<{
  employeeId: ID;
  showTitle?: boolean;
}>();

const gridOptions: VxeGridProps = {
  columns: [
    {
      title: '姓名',
      field: 'name',
      width: 120,
      fixed: 'left',
    },
    {
      title: '会议名称',
      field: 'meetingName',
      minWidth: 150,
    },
    {
      title: '年份',
      field: 'year',
      width: 120,
    },
    {
      title: '报名时间',
      field: 'createTime',
      width: 180,
    },
    {
      title: '报名来源',
      field: 'sourceTrackName',
      width: 200,
    },
    // {
    //   title: '签到状态',
    //   field: 'signStatus',
    //   width: 150,
    //   slots: {
    //     default: ({ row }) => {
    //       return renderDict(row.sitStatus, DictEnum.MEETING_SIGN_STATUS, true);
    //     },
    //   },
    // },
  ],
  // height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    enabled: true,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        if (!props.employeeId) {
          return { rows: [] };
        }
        const rows = await meetingEnrollList({ employeeId: props.employeeId });
        return { rows };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  id: 'meeting-enroll-history-list',
  showOverflow: true,
};

const [BasicTable] = useVbenVxeGrid({
  gridOptions,
});

onMounted(() => {
  console.log('employeeId', props.employeeId);
});
</script>

<template>
  <BasicTable>
    <template #table-title>
      <main-title v-if="showTitle" text="会议报名列表" />
    </template>
  </BasicTable>
</template>
